<div th:fragment="cacheMonitor">
    <div class="card mt-4">
        <div class="card-header section-header">缓存监控</div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <div>命中率：<span id="hitRate">-</span></div>
                    <div>错误率：<span id="errorRate">-</span></div>
                    <div>健康状态：<span id="healthStatus">-</span></div>
                </div>
                <div class="col-md-3">
                    <div>当前容量：<span id="currentSize">-</span></div>
                    <div>最大容量：<span id="maxSize">-</span></div>
                    <div>驱逐次数：<span id="evictionCount">-</span></div>
                </div>
                <div class="col-md-3">
                    <div>平均刷新耗时：<span id="averageRefreshTime">-</span> ms</div>
                    <div>最大刷新耗时：<span id="maxRefreshTime">-</span> ms</div>
                </div>
                <div class="col-md-3">
                    <div>平均获取耗时：<span id="averageGetTime">-</span> ms</div>
                    <div>最大获取耗时：<span id="maxGetTime">-</span> ms</div>
                </div>
            </div>
            <div class="mb-2">
                <button class="btn btn-primary me-2" onclick="refreshCache()">刷新缓存</button>
                <button class="btn btn-secondary" onclick="warmUpCache()">预热缓存</button>
            </div>
            <div class="alert alert-warning mt-3 d-none" id="cacheError"></div>
        </div>
    </div>
    <script>
        function loadCacheMonitor() {
            axios.get('/api/cache/metrics').then(res => {
                const d = res.data;
                document.getElementById('hitRate').textContent = (d.hitRate * 100).toFixed(2) + '%';
                document.getElementById('errorRate').textContent = (d.errorRate * 100).toFixed(2) + '%';
                document.getElementById('currentSize').textContent = d.currentSize;
                document.getElementById('maxSize').textContent = d.maxSize;
                document.getElementById('evictionCount').textContent = d.evictionCount;
                document.getElementById('averageRefreshTime').textContent = d.averageRefreshTime;
                document.getElementById('maxRefreshTime').textContent = d.maxRefreshTime;
                document.getElementById('averageGetTime').textContent = d.averageGetTime;
                document.getElementById('maxGetTime').textContent = d.maxGetTime;
            });
            axios.get('/api/cache/health').then(res => {
                document.getElementById('healthStatus').textContent = res.data.status;
            });
        }
        function refreshCache() {
            axios.post('/api/cache/refresh').then(res => {
                if(res.data.success){
                    loadCacheMonitor();
                } else {
                    showCacheError(res.data.message);
                }
            }).catch(e => showCacheError(e.message));
        }
        function warmUpCache() {
            axios.post('/api/cache/warm-up').then(res => {
                if(res.data.success){
                    loadCacheMonitor();
                } else {
                    showCacheError(res.data.message);
                }
            }).catch(e => showCacheError(e.message));
        }
        function showCacheError(msg) {
            const el = document.getElementById('cacheError');
            el.textContent = msg;
            el.classList.remove('d-none');
        }
        document.addEventListener('DOMContentLoaded', loadCacheMonitor);
    </script>
</div> 